<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>填写核对购物信息</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/shangpingoumai.css">
    <script src="../../static/js/jquery-1.8.3.min.js"></script>
    <script src="../../static/js/city.js/cityJson.js"></script>
    <script src="../../static/js/city.js/citySet.js"></script>
    <script src="../../static/js/city.js/Popt.js"></script>
    <script src="../../static/js/shuruzhifumima.js"></script>
</head>
<body>
<!--全部开始-->
<div class="tianxiehedui">
    <!--标题-->
    <div class="rzhdndgw">温馨提示：请认真核对您的购物信息</div>
    <!--收货人信息-->
    <div class="shouhurxl clastyo">
        <div class="shouhurxl1">
            <em>收货人信息</em>
            <a href="#" class="chgeb">修改</a>
        </div>
        <div class="shouhurxl2">
            <span>{{ data.user_addr.r_name }}</span>
            <span>{{ data.user_addr.r_addr_area }}{{ data.user_addr.r_addr }}</span>
            <span><em>电话：</em><em>{{ data.user_addr.r_mobile }}</em></span>
        </div>
    </div>
    <!--点击修改会出现这个选择框-->
    <div class="changepc">
        <!--以前的旧地址-->
        <div class="tongyongdizhi">
            <input type="radio" name="adressa"
                   style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
            <span>{{ data.user_addr.r_name }}</span>
            <span>{{ data.user_addr.r_addr_area }}{{ data.user_addr.r_addr }}</span>
            <span><em>电话：</em><em>{{ data.user_addr.r_mobile }}</em></span>
            <a href="#">删除</a>
        </div>
        <!--添加新地址-->
        <div class="dandudizhi">
            <input type="radio" name="adressa" class="adressa"
                   style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
            <span>使用新地址</span>
        </div>
        <!--添加新地址-->
        <div class="opcaty1">
            <div class="opcaty2">
                <em>收货人姓名：</em>
                <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px"
                       type="text" class="shuru"/>

            </div>
            <div class="opcaty2">
                <em>所在的地区：</em>
                <input type="text" id="city" value="点击选择地区"/ style=" height:28px; font-size:12px; border:1px solid #bbb;
                float:left">
                <script type="text/javascript">
                    $("#city").click(function (e) {
                        SelCity(this, e);
                    });
                </script>
            </div>
            <div class="opcaty2">
                <em>详细的地址：</em>
                <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; width:488px"
                       type="text" class="shuru" placeholder="请填写真实地址，不需要重复填写所在地区" required/>

            </div>
            <div class="opcaty2">
                <em>联系的电话：</em>
                <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px"
                       type="text" class="shuru"/>

            </div>
            <a href="#" class="bcshrxopl">保存收货人信息</a>
        </div>
        <!--新地址结束-->
        <!--添加新地址结束-->
    </div>
    <script>
        $(function () {
            $(".chgeb").click(function () {
                $(".changepc").css({display: "block"});
                $(".clastyo").css({display: "none"})
            })
            $(".bcshrxopl").click(function () {
                $(".changepc").css({display: "none"});
                $(".clastyo").css({display: "block"});
                $(".opcaty1").css({display: "none"})
            })
            $(".adressa").click(function () {
                $(".opcaty1").css({display: "block"})
            })
        })
    </script>
    <!--这个选择框结束-->
    <!--收货人信息结束-->
    <!--支付方式-->
    <div class="shouhurxl">
        <h3>支付方式</h3>
        <div class="zhifufangsj1">
            <span>在线支付</span>
        </div>
    </div>
    <!--支付方式结束-->
    <!--发票信息-->
    <div class="shouhurxl shouhurxl13">
        <div class="shouhurxl1 shouhurxl12">
            <em>发票信息</em>
            <a href="#">修改</a>
        </div>
        <div class="shouhurxl2">
            <span>普通发票 个人 食品</span>
        </div>
        <script>
            $(function () {
                $(".shouhurxl12 a").click(function () {
                    $(".shouhurxl13").css({display: "none"});
                    $(".xgfpxo").css({display: "block"});
                    $(".fapiaowr3").css({display: "none"})
                })
                $(".godieba").click(function () {
                    $(".fapiaowr3").css({display: "block"})
                })
                $(".worilrgo").click(function () {
                    $(".xgfpxo").css({display: "none"});
                    $(".shouhurxl13").css({display: "block"})
                })

            })
        </script>
    </div>
    <!--修改发票信息-->
    <div class="xgfpxo">
        <div class="fapiaowr">
            <span>发票信息</span>
        </div>
        <!--众多发票的信息-->
        <div class="fapiaowr fapiaowr1">
            <input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票 个人 食品</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
            <input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
            <input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <div class="fapiaowr fapiaowr1">
            <input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
            <a href="#">删除</a>
        </div>
        <!--发票结束-->
        <!--使用新的发票信息-->
        <div class="fapiaowr fapiaowr1">
            <input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"
                   class="godieba"><span>使用新的发票信息</span>
            <!--点击后这个块又出现-->
            <div class="fapiaowr fapiaowr3">
                <div class="fapiaowr">
                    <em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票类型：</em>
                    <input type="radio" name="fapla" checked
                           style=" float:left; display:block; width:13px; height:13px; margin-top:8px">
                    <span style=" display:block; float:left; padding-left:6px; line-height:30px; font-size:14px; color:#333">普通发票</span>
                </div>
                <div class="fapiaowr">
                    <em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票抬头：</em>
                    <select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
                        <option value="person">个人</option>
                        <option value="company">单位</option>
                    </select>
                    <input style="float:left; border:1px solid #bbb; box-shadow:none; height:26px; font-size:12px; text-indent:6px; width:160px; margin-left:6px"
                           type="text" class="shuru" placeholder="单位名称" required/>
                </div>
                <div class="fapiaowr">
                    <em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票内容：</em>
                    <select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
                        <option value="person">明细</option>
                        <option value="company">酒</option>
                        <option value="company">玩具</option>
                        <option value="company">汽车</option>
                        <option value="company">家电</option>
                    </select>
                </div>

            </div>
            <div style=" width:100%; height:auto ; overflow:hidden">
                <a href="#"
                   style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px"
                   class="worilrgo bcfpxxnm">保存发票信息</a>
                <a href="#"
                   style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px; margin-left:10px"
                   class="worilrgo byynm">不需要发票</a>
            </div>
            <!--这个块结束-->
        </div>
    </div>
    <!--发票信息结束-->
    <!--商品清单-->
    <div class="shouhurxl">
        <!--一条商品信息开始-->
        <div class="xxpop1" style="background:rgba(255,153,0,0.1); padding-bottom:6px">
            <div class="xxpop2">
                <span>店铺</span>
                <a href="#"><p>帝云自营店</p></a>
            </div>
            <div class="xxpop2" style=" width:630px">
                <span>商品</span>
                <a href="#"><p style=" line-height:20px"><img
                        src="{{ data.goods.g_image }}"/>&nbsp;{{ data.goods.g_name }}</p></a>
            </div>
            <div class="xxpop2">
                <span>单价(元)</span>
                <p>{{ data.goods.g_price }}</p>
            </div>
            <div class="xxpop2">
                <span>数量</span>
                <p>{{ data.goods_count }}</p>
            </div>
            <div class="xxpop2">
                <span>小计(元)</span>
                <p>{{ data.goods_all_price }}</p>
            </div>
        </div>
        <!--买家留言-->
        <div class="maijiayouhuayue">
            <em style=" width:90px; text-align:right">买家留言：</em>
            <textarea
                    style=" line-height:20px; font-size:14px; color:#111; border:1px solid #bbb; width:1000px; box-shadow:none"
                    placeholder="选填：对本次交易的说明（建议填写已经和商家达成一致的说明）"></textarea>
        </div>
        <!--商品合计-->
        <div class="shouhurxlm">
            <ul>
                <li>
                    <em><s>0</s>元</em>
                    <em>运费：</em>
                </li>
                <li>
                    <em><s>{{ data.goods_all_price }}</s>元</em>
                    <em>商品金额：</em>
                </li>
                <li>
                    <em><s>{{ data.goods_all_price }}</s>元</em>
                    <em>本店合计：</em>
                </li>
            </ul>
            <!--订单总金额-->
            <div class="ddzjes">
                <em>订单总金额：</em>
                <em style=" padding-left:0"><s class="all_price">{{ data.goods_all_price }}</s>元</em>
            </div>
            <!--使用预存款-->
            <div class="syycklo">
                <em>用预存款：</em>
                <input type="checkbox" class="dianyidian" value="1" name="pd_pay"
                       style=" margin-top:8px; float:left; margin-left:6px"><span>使用预存款（可用金额：<i>40</i>元）</span>
            </div>
            <!--请输入支付密码-->
            <div class="zgykskbj">
                <em>支付密码：</em>
                <input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; margin-top:10px"
                       type="text" class="shuru"/>
                <a href="#">使用</a>
            </div>
            <script>
                $(function () {
                    $(".dianyidian").click(function () {
                        $(".zgykskbj").slideToggle()
                    })
                })
            </script>
            <!--支付密码结束-->
        </div>
        <!--一条商品信息结束-->
    </div>
    <!--商品清单结束-->
    <a href="/goods/tijiaodingdan" class="tijiaodingdang56 btn_submit">提交订单</a>
</div>
</body>
</html>    
                     
           
            
                
                    
            
                
        
            
        

